<template>
  <div class="cardbox">
    <div v-for="(o, index) in props.infodata" :key="o">
      <div class="card">
        <img class="cardimg" :src="o.imgsrc" />
        <div class="info">
          <h1>{{ o.title }}</h1>
          <h5>
            {{ o.info }}
          </h5>
        </div>
        <el-button class="btn" @click="btn_info(o)" link
          >点击查看详情</el-button
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
//首先在setup中定义
const router = useRouter();
const props = defineProps({
  infodata: Array,
});

const btn_info = (e) => {
  // console.log(e);
  router.push({ path: '/partyeducation', query: { userId: e.title }})
};
</script>

<style lang="scss" scoped>
.cardbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* justify-content: center; */
  .card {
    margin: 0 20px;
    width: 240px;
    height: 300px;
    border: 0.1px rgb(0, 0, 0) solid;
    // background-color: aqua;
    margin-top: 20px;
    .cardimg {
      width: 100%;
      height: 210px;
      object-fit: cover;
    }
    .info {
      margin: 0 auto;
      width: 90%;
      height: 60px;
      // background-color: antiquewhite;
      // padding: 10px;
      word-wrap: break-word;
      cursor: pointer;
      //超出两行省略号
      // width: 25%;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .btn {
      float: right;
    }
    transition: 1.4s;
  }
  .card:hover {
    box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.5);
  }
}
</style>
